<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<input type="button" value="查询书籍">
<table border="1">
	<thead>
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>价格</td>
			<td>出版社</td>
			<td>操作</td>
		</tr>
	</thead>
	<tbody>

	</tbody>
</table>
<script>
	document.querySelector("input").onclick = function () {
		var xhr = new XMLHttpRequest();
		xhr.open("get","./json.php");
		xhr.send(null);
		xhr.onreadystatechange = function () {
			if(xhr.status===200 && xhr.readyState===4){
				var data = xhr.responseText;
				//两种转对象方法
			    //var obj = eval("("+data+")");//1.eval要用“(”“)”包起来
				//第二种方法JSON.parse()
			    var obj2 = JSON.parse(data);
				var str = "";
			    for(var i=0;i<obj2.length;i++){
			    	str +=`
						<tr>
							<td>${obj2[i]["bookName"]}</td>
							<td>${obj2[i]["author"]}</td>
							<td>${obj2[i]["price"]}</td>
							<td>${obj2[i]["bookName"]}</td>
							<td>${obj2[i]["cbs"]}</td>
							<td><input type="button" value="${obj2[i]["operation"]}"></td>
						</tr>
			    	`;
			    }
				document.querySelector("tbody").innerHTML = str;

			}
		}
	}
</script>
</body>
</html>